<template>
  <div class="w-1/3 mx-auto mt-40 shadow-2xl shadow-blue-300 rounded-box">
    <div class="w-3/4 mx-auto pt-4">
      <label class="input input-bordered flex items-center gap-2 my-4">
        Email
        <input type="text" class="grow" v-model="email" />
      </label>

      <label class="input input-bordered flex items-center gap-2 my-4">
        Name
        <input type="text" class="grow" v-model="name" />
      </label>

      <!-- TODO: display optimize -->
      <select class="select select-bordered w-full mb-4" v-model="classInfo">
        <option disabled>Choose Class</option>
        <option
          v-for="classItem in classInChargeArr"
          :key="classItem"
          :value="classItem"
          @click="console.log(classItem)"
        >
          Class {{ classItem.split('|')[0] }} | Year
          {{ classItem.split('|')[1] }}
        </option>
      </select>

      <select class="select select-bordered w-full mb-4" v-model="gender">
        <option disabled>Choose Gender</option>
        <option>male</option>
        <option>female</option>
      </select>
    </div>

    <div class="text-center">
      <button class="btn btn-primary my-2" @click="onClick">
        Create Student
      </button>
    </div>
  </div>
</template>

<script setup>
import { signup } from '@/services/apiAuth';
import { createStudent } from '@/services/apiStudent';
import { getTeacherByTeacherId } from '@/services/apiTeacher';
import { getConfig } from '@/utils/configHelper';
import { ref, onMounted } from 'vue';

const email = ref('someone@example.com');
const name = ref('Someone');
const classInfo = ref('X|X');

const teacherId = ref('');

const classInChargeArr = ref([]);

const gender = ref('male');

async function onClick() {
  const userData = await signup(email.value, '123456', { isStudent: true });
  const studentId = userData.user.id;

  // Insert a student
  const students = await createStudent({
    name: name.value,
    class: classInfo.value.split('|')[0],
    grade: classInfo.value.split('|')[1],
    teacher_id: teacherId.value,
    avatar:
      'https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp',
    student_id: studentId,
  });

  console.log(students);
}

onMounted(async () => {
  const token = getConfig('SUPABASE_TOKEN');
  const userToken = JSON.parse(localStorage.getItem(token));

  teacherId.value = userToken.user.id;

  const teachers = await getTeacherByTeacherId(teacherId.value);
  classInChargeArr.value = JSON.parse(teachers[0].class_in_charge);
});
</script>
